<template>
  <view class="simple-address" v-if="showPopup" @touchmove.stop.prevent="clear">
    <!-- 遮罩层 -->
    <view
      class="simple-address-mask"
      @touchmove.stop.prevent="clear"
      v-if="maskClick"
      :class="[ani + '-mask', animation ? 'mask-ani' : '']"
      :style="{
        'background-color': maskBgColor,
      }"
      @tap="hideMask(true)"
    ></view>

    <view
      class="simple-address-content simple-address--fixed"
      :class="[type, ani + '-content', animation ? 'content-ani' : '']"
    >
      <view class="simple-address__header">
        <view class="simple-address__header-btn-box" @click="pickerCancel">
          <text
            class="simple-address__header-text"
            :style="{ color: cancelColor, fontSize: btnFontSize }"
            >取消</text
          >
        </view>
        <view class="simple-address__header-btn-box" @click="pickerConfirm">
          <text
            class="simple-address__header-text"
            :style="{
              color: confirmColor || themeColor,
              fontSize: btnFontSize,
            }"
            >确定</text
          >
        </view>
      </view>
      <view class="simple-address__box">
        <picker-view
          indicator-style="height: 70rpx;"
          class="simple-address-view"
          :value="pickerValue"
          @change="pickerChange"
        >
          <picker-view-column>
            <!-- #ifndef APP-NVUE -->
            <view
              class="picker-item"
              :style="{ fontSize: fontSize }"
              v-for="(item, index) in provinceDataList"
              :key="index"
              >{{ item.areaName || item.divisionName }}</view
            >
            <!-- #endif -->
            <!-- #ifdef APP-NVUE -->
            <text
              class="picker-item"
              :style="{ fontSize: fontSize }"
              v-for="(item, index) in provinceDataList"
              :key="index"
              >{{ item.areaName || item.divisionName }}</text
            >
            <!-- #endif -->
          </picker-view-column>
          <picker-view-column>
            <!-- #ifndef APP-NVUE -->
            <view
              class="picker-item"
              :style="{ fontSize: fontSize }"
              v-for="(item, index) in cityDataList"
              :key="index"
              >{{ item.areaName || item.divisionName }}</view
            >
            <!-- #endif -->
            <!-- #ifdef APP-NVUE -->
            <text
              class="picker-item"
              :style="{ fontSize: fontSize }"
              v-for="(item, index) in cityDataList"
              :key="index"
              >{{ item.areaName || item.divisionName }}</text
            >
            <!-- #endif -->
          </picker-view-column>
          <picker-view-column>
            <!-- #ifndef APP-NVUE -->
            <view
              class="picker-item"
              :style="{ fontSize: fontSize }"
              v-for="(item, index) in areaDataList"
              :key="index"
              >{{ item.areaName || item.divisionName }}</view
            >
            <!-- #endif -->
            <!-- #ifdef APP-NVUE -->
            <text
              class="picker-item"
              :style="{ fontSize: fontSize }"
              v-for="(item, index) in areaDataList"
              :key="index"
              >{{ item.areaName || item.divisionName }}</text
            >
            <!-- #endif -->
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * Simple-addres  地址联动组件
 * @description 三级地址联动，支持（app）nvue、小程序、H5
 * @tutorial https://ext.dcloud.net.cn/plugin?id=1084
 * @property {String} animation 是否开启动画
 * @property {String} type = [bottom] 弹出层类型，暂时只支持底部弹出
 * @property {Boolean} maskClick = [true | false] 是否允许点击遮罩层关闭
 * @property {Boolean} show = [true | false]  显示或隐藏地址组件
 * @property {String} maskBgColor 遮罩层背景颜色
 * @property {String} cancelColor 取消按钮颜色，默认为：#1aad19
 * @property {String} confirmColor 确认按钮颜色，默认为：themeColor
 * @property {String} themeColor 主题颜色，后续会废弃该配置，建议使用`cancelColor`或`confirmColor`
 * @property {String} btnFontSize 取消、确认按钮字体大小，默认为`uni.scss里的 $uni-font-size-base `
 * @property {String} fontSize picker-item字体大小，默认为：28rpx
 * @property {Array} pickerValueDefault 默认值，可以通过function queryIndex 获取
 * @property {Function} queryIndex 根据自定义信息返回对应的index
 * @property {Function} open 打开
 * @example  <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
 */


import { getProvinceCity, getStreetList } from "@/api";
export default {
  name: "simpleAddress",
  props: {
    colCount: {
      type: Number,
      default:2
    },
    parentId: {
      type: String,
      default: "000000",
    },
    mode: {
      // 地址类型
      // default 则代表老版本根据index索引获取数据
      //
      type: String,
      default: "default",
    },
    // 开启动画
    animation: {
      type: Boolean,
      default: true,
    },
    /* 弹出层类型，可选值；
				bottom：底部弹出层
			*/
    type: {
      type: String,
      default: "bottom",
    },
    // maskClick
    maskClick: {
      type: Boolean,
      default: true,
    },
    show: {
      type: Boolean,
      default: true,
    },
    maskBgColor: {
      type: String,
      default: "rgba(0, 0, 0, 0.4)", //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
    },
    themeColor: {
      type: String,
      default: "", // 确认按钮颜色（向下兼容）
    },
    cancelColor: {
      type: String,
      default: "", // 取消按钮颜色
    },
    confirmColor: {
      type: String,
      default: "", // 确认按钮颜色
    },
    fontSize: {
      type: String,
      default: "28rpx", // picker-item字体大小
    },
    btnFontSize: {
      type: String,
      default: "", // 按钮的字体大小
    },
    /* 默认值 */
    pickerValueDefault: {
      type: Array,
      default() {
        return [0, 0, 0];
      },
    },
  },
  data() {
    return {
      ani: "",
      showPopup: false,
      pickerValue: [0, 0, 0],
      provinceDataList: [],
      cityDataList: [],
      areaDataList: [],
      areas: [], // 国家/地区
      streets: [], //街道
    };
  },
  watch: {
    colCount(value) {
      if (value == 2) {
        this.initProvinces();
      } else {
        this.initStreets();
      }
    },
    show(newValue) {
      if (newValue) {
        this.open();
      } else {
        this.close();
      }
    },
    // pickerValueDefault() {
    //   this.init();
    // },
  },
  created() {
    this.getProvinceCitys();
    this.getStreetList();
  },

  methods: {
    // 获取省市区
    getProvinceCitys() {
      getProvinceCity().then((res) => {
        this.areas = res;
        if (this.colCount == 2) {
          this.initProvinces();
        }
      });
    },

    // 获取接到信息
    getStreetList() {
      getStreetList({ parentId: this.parentId }).then((res) => {
        this.streets = res;
        if (this.colCount == 3) {
          this.initStreets();
          // this._$emit("onConfirm");     // 触发父组件确定按钮方法，默认选择第一个区、街道、社区
        }
      });
    },
    initProvinces() {
      // this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
      if (this.colCount === 2) {
        const worldAreas = [];
        this.areas.forEach((item) => {
          worldAreas.push(item.children);
        });
        this.provinceDataList = worldAreas.flat();
        this.cityDataList = this.provinceDataList[0].children;
        this.areaDataList = this.cityDataList[0].children;
      }

      // this.provinceDataList = provinceData;
      // this.cityDataList = cityData[this.pickerValueDefault[0]];
      // this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
      // this.pickerValue = this.pickerValueDefault;
    },
    initStreets() {
      if (this.colCount === 3) {
        console.log("streets：",this.streets);
        this.streets.forEach((item)=>{
          if(item.id == 809 || item.label == "广东省"){
            item.children.forEach((it)=>{
              if(it.id == 884 || it.label == "深圳市"){
                this.provinceDataList = it.children;
              }
            })
          }
        })
        
        this.cityDataList = this.provinceDataList.length ? this.provinceDataList[0].children : [];
        this.areaDataList = this.cityDataList.length ? this.cityDataList[0].children : [];

        // this.provinceDataList = this.streets[0].children;

        // this.cityDataList = this.provinceDataList[0].children;
        // this.areaDataList = this.cityDataList[0].children;
      }
    },
    // handPickValueDefault() {
    //   if (this.pickerValueDefault !== [0, 0, 0]) {
    //     if (this.pickerValueDefault[0] > this.provinceDataList.length - 1) {
    //       this.pickerValueDefault[0] = this.provinceDataList.length - 1;
    //     }
    //     if (
    //       this.pickerValueDefault[1] >
    //       this.cityDataList[this.pickerValueDefault[0]].length - 1
    //     ) {
    //       this.pickerValueDefault[1] =
    //         this.cityDataList[this.pickerValueDefault[0]].length - 1;
    //     }
    //     if (
    //       this.pickerValueDefault[2] >
    //       this.areaDataList[this.pickerValueDefault[0]][this.pickerValueDefault[1]]
    //         .length -
    //         1
    //     ) {
    //       this.pickerValueDefault[2] =
    //         this.areaDataList[this.pickerValueDefault[0]][this.pickerValueDefault[1]]
    //           .length - 1;
    //     }
    //   }
    // },
    pickerChange(e) {
      let changePickerValue = e.detail.value;

      if (this.pickerValue[0] !== changePickerValue[0]) {
        // 第一级发生滚动
        // this.cityDataList =
        //   this.provinceDataList[changePickerValue[0]].children;
        // this.areaDataList = this.cityDataList[changePickerValue[1]].children;
        // changePickerValue[1] = 0;
        // changePickerValue[2] = 0;

        this.cityDataList =
          this.provinceDataList[changePickerValue[0]].children;
        if(this.cityDataList.length >0){
          this.areaDataList = this.cityDataList[changePickerValue[1]].children;
        }else{
          this.areaDataList = []
        }
        
        changePickerValue[1] = 0;
        changePickerValue[2] = 0;

      } else if (this.pickerValue[1] !== changePickerValue[1]) {
        // 第二级滚动
        this.areaDataList = this.cityDataList[changePickerValue[1]].children;
        changePickerValue[2] = 0;
      }
      this.pickerValue = changePickerValue;
      this._$emit("onChange");
    },
    _$emit(emitName) {
      let pickObj = {
        label: this._getLabel(),
        value: this.pickerValue,
        provinceCode: this._getProvinceCode(),
        divisionCode: this._getDivisionCode(),
        cityCode: this._getCityCode(),
        areaCode: this._getAreaCode(),
        labelArr: this._getId().split("-"),
      };
      this.$emit(emitName, pickObj);
    },
    _getLabel() {
      let pcikerLabel = "";
      if (this.colCount == 2) {
        pcikerLabel =
          this.provinceDataList[this.pickerValue[0]].areaName +
          "-" +
          this.cityDataList[this.pickerValue[1]].areaName;
      } else {
        // pcikerLabel =
        //   this.provinceDataList[this.pickerValue[0]].divisionName +
        //   "-" +
        //   this.cityDataList[this.pickerValue[1]].divisionName +
        //   "-" +
        //   this.areaDataList[this.pickerValue[2]].divisionName;

        // 选择 市内隔离居家隔离、市内无需隔离
        // 有区、有街道、有社区
        if(this.provinceDataList.length>0 && this.cityDataList.length>0 && this.areaDataList.length>0){
          pcikerLabel =
          this.provinceDataList[this.pickerValue[0]].divisionName +
          "-" +
          this.cityDataList[this.pickerValue[1]].divisionName +
          "-" +
          this.areaDataList[this.pickerValue[2]].divisionName;
        }
        // 有区、有街道、无社区
        else if(this.provinceDataList.length>0 && this.cityDataList.length>0 && this.areaDataList.length == 0){
          pcikerLabel =
          this.provinceDataList[this.pickerValue[0]].divisionName +
          "-" +
          this.cityDataList[this.pickerValue[1]].divisionName;
        }
        // 有区、无街道、无社区
        else if(this.provinceDataList.length>0 && this.cityDataList.length == 0 && this.areaDataList.length == 0){
          pcikerLabel =
          this.provinceDataList[this.pickerValue[0]].divisionName;
        }
      }

      return pcikerLabel;
    },
    _getId() {
      let pcikerId = "";
      if (this.colCount == 2) {
        pcikerId =
          this.provinceDataList[this.pickerValue[0]].id +
          "-" +
          this.cityDataList[this.pickerValue[1]].id;
      } else {
        // 选择 市内隔离居家隔离、市内无需隔离
        // 有区、有街道、有社区
        if(this.provinceDataList.length>0 && this.cityDataList.length>0 && this.areaDataList.length>0){
          pcikerId =
          this.provinceDataList[this.pickerValue[0]].divisionCode +
          "-" +
          this.cityDataList[this.pickerValue[1]].divisionCode +
          "-" +
          this.areaDataList[this.pickerValue[2]].divisionCode;
        }
        // 有区、有街道、无社区
        else if(this.provinceDataList.length>0 && this.cityDataList.length>0 && this.areaDataList.length == 0){
          pcikerId =
          this.provinceDataList[this.pickerValue[0]].divisionCode +
          "-" +
          this.cityDataList[this.pickerValue[1]].divisionCode;
        }
        // 有区、无街道、无社区
        else if(this.provinceDataList.length>0 && this.cityDataList.length == 0 && this.areaDataList.length == 0){
          pcikerId =
          this.provinceDataList[this.pickerValue[0]].divisionCode;
        }
      }

      return pcikerId;
    },
    _getDivisionCode() {
      if (this.provinceDataList.length) {
        return this.provinceDataList[this.pickerValue[0]].divisionCode;
      }
    },
    _getProvinceCode() {
      if (this.provinceDataList.length>0) {
        return this.provinceDataList[this.pickerValue[0]].id;
      }
    },
    _getCityCode() {
      // return this.cityDataList[this.pickerValue[1]].id;
      if(this.cityDataList.length>0){
        return this.cityDataList[this.pickerValue[1]].id;
      }else{
        return "";
      }
    },
    _getAreaCode() {
      if (this.colCount === 3) {
        // return this.areaDataList[this.pickerValue[2]].id;
        if(this.areaDataList.length>0){
          return this.areaDataList[this.pickerValue[2]].id;
        }else{
          return "";
        }
      }
    },
    queryIndex(params = [], type = "value") {
      // params = [ 11 ,1101,110101 ];
      // 1.获取省份的index
      let provinceIndex = provinceData.findIndex(
        (res) => res[type] == params[0]
      );
      let cityIndex = cityData[provinceIndex].findIndex(
        (res) => res[type] == params[1]
      );
      let areaIndex = areaData[provinceIndex][cityIndex].findIndex(
        (res) => res[type] == params[2]
      );
      return {
        index: [provinceIndex, cityIndex, areaIndex],
        data: {
          province: provinceData[provinceIndex],
          city: cityData[provinceIndex][cityIndex],
          area: areaData[provinceIndex][cityIndex][areaIndex],
        },
      };
    },
    clear() {},
    hideMask() {
      this._$emit("onCancel");
      this.close();
    },
    pickerCancel() {
      this._$emit("onCancel");
      this.close();
    },
    pickerConfirm() {
      this._$emit("onConfirm");
      this.close();
    },
    open() {
      this.showPopup = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.ani = "simple-" + this.type;
        }, 100);
      });
    },
    close(type) {
      if (!this.maskClick && type) return;
      this.ani = "";
      this.$nextTick(() => {
        setTimeout(() => {
          this.showPopup = false;
        }, 300);
      });
    },
    changeData(){
      this.streets
      this.areas
      this.areaDataList
      this.cityDataList
      this.provinceDataList
      debugger
    }
  },
};
</script>

<style lang="scss" scoped>
.simple-address {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.simple-address-mask {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  /* #ifndef APP-NVUE */
  z-index: 99;
  /* #endif */
}

.mask-ani {
  transition-property: opacity;
  transition-duration: 0.2s;
}

.simple-bottom-mask {
  opacity: 1;
}

.simple-center-mask {
  opacity: 1;
}

.simple-address--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition-property: transform;
  transition-duration: 0.3s;
  transform: translateY(460rpx);
  /* #ifndef APP-NVUE */
  z-index: 99;
  /* #endif */
}

.simple-address-content {
  background-color: #ffffff;
}

.simple-content-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(500rpx);
}

.content-ani {
  transition-property: transform, opacity;
  transition-duration: 0.2s;
}

.simple-bottom-content {
  transform: translateY(0);
}

.simple-center-content {
  transform: scale(1);
  opacity: 1;
}

.simple-address__header {
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom-color: #f2f2f2;
  border-bottom-style: solid;
  border-bottom-width: 1rpx;
}

.simple-address--fixed-top {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  border-top-color: $uni-border-color;
  border-top-style: solid;
  border-top-width: 1rpx;
}

.simple-address__header-btn-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 70rpx;
}

.simple-address__header-text {
  text-align: center;
  font-size: $uni-font-size-base;
  color: #1aad19;
  line-height: 70rpx;
  padding-left: 40rpx;
  padding-right: 40rpx;
}

.simple-address__box {
  position: relative;
}

.simple-address-view {
  position: relative;
  bottom: 0;
  left: 0;
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  width: 750rpx;
  /* #endif */
  height: 408rpx;
  background-color: rgba(255, 255, 255, 1);
}

.picker-item {
  text-align: center;
  line-height: 70rpx;
  text-overflow: ellipsis;
  font-size: 28rpx;
}
</style>
